<template>
	<section class="bgwhite filled">
		<div>
			<mt-header title="注 册">
				<!-- <mt-button icon="back" @click="goBack" slot="left"></mt-button> -->
				<router-link to="/" slot="left">
					<mt-button icon="back">首页</mt-button>
				</router-link>
				<router-link to="/login" slot="right">
					<mt-button>
						<span class="fontred">登录</span>
					</mt-button>
				</router-link>
			</mt-header>
			<ul>
				<li class="linet lineb ml10 mr10 br4 mt10">
					<mt-field
						label="手机号"
						:attr="{ maxlength: 11 }"
						:state="phone&&phone.length==11?'success':'default'"
						placeholder="请输入手机号"
						type="tel"
						v-model="phone"
					></mt-field>
				</li>
				<li class="lineb ml10 mr10 br4 mt10">
					<mt-field
						label="验证码"
						:attr="{ maxlength: 6 }"
						:state="yzm&&yzm.length==6?'success':'default'"
						placeholder="请输验证码"
						type="text"
						v-model="yzm"
					>
						<span @click="getMsg">
							<mt-button :type="phone.length==11?'primary':'default'" size="small">短信验证码</mt-button>
						</span>
					</mt-field>
				</li>
				<li class="lineb ml10 mr10 br4 mt10">
					<mt-field
						label="密码"
						:state="password&&password.length>=6?'success':'default'"
						placeholder="请设置密码"
						type="password"
						v-model="password"
					></mt-field>
				</li>
				<li class="lineb ml10 mr10 br4 mt10" ref="tuiGuang">
					<mt-field label="推广码" placeholder="没有可不填" type="text" v-model="tuiGuangCode"></mt-field>
				</li>
				<li class="ml10 mr10 mt20" @click="register">
					<mt-button size="large" type="primary">注 册</mt-button>
				</li>
				<li v-show="false">
					<img :src="regbanner" width="100%" alt>
				</li>
			</ul>
		</div>
	</section>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import MD5 from '@/tools/md5.js'
export default {
	name: 'Register',
	data() {
		return {
			phone: '',
			yzm: '',
			str: '',
			password: '',
			regImageCode: '',
			tuiGuangCode: '',
			yzmKey: true,
			registerkey: true,
			regbanner: './static/imgs/regbanner.png'
		}
	},
	mounted() {
		this.getPromte()
	},
	computed: {},
	methods: {
		getPromte() {
			// 获取推广员信息
			// 获取推广员信息
			const code = this.$route.query.abc || localStorage.getItem("promoterCode") || cookie.getCookie('promoterCode')
			if (code) {
				this.$refs.tuiGuang.style.display = 'none'
                this.tuiGuangCode = code
                localStorage.setItem('promoterCode',code)
                cookie.setCookie('promoterCode', code)
			}
		},
		getMsg() {
			if (this.phone.length != 11 || !this.yzmKey) {
				Toast('手机号码不正确')
				return
			}
			this.yzmKey = false
			Indicator.open({
				text: '请稍候...',
				spinnerType: 'fading-circle'
			})
			axios({
				method: 'post',
				url: '/user/user/getRegCode.do',
				params: {
					userPhone: this.phone,
					regImageCode: this.regImageCode
				}
			})
				.then(res => {
					Indicator.close()
					res = res.data
					//600说明图片验证码错误；
					//601需要输入验证码；
					if (res.code == 601) {
						//601时需要输入验证码
						//读取图片验证码
						MessageBox.prompt('<img src=' + '/user/user/getRegImage.do?userPhone=' + this.phone + '&_=' + new Date().getTime() + ' height="45" width="94">', '请您先填写下面数字').then(({ value, action }) => {
							//保存验证码
							this.regImageCode = value.replace(/\s+/g, '')
							//确认以后再次调短信接口
							this.getMsg()
						})
					} else {
					}
					Toast(res.msg)
				})
				.then(() => {
					this.regImageCode = ''
					Indicator.close()
					this.yzmKey = true
				})
				.catch(() => {
					this.regImageCode = ''
					Indicator.close()
					Toast('请求了错')
					this.yzmKey = true
				})
		},
		register() {
			if (this.phone.length != 11) {
				Toast('手机号码不正确')
				return
			}
			if (this.password.length < 6) {
				Toast('密码长度须大于6位')
				return
			}
			this.registerkey = false
			Indicator.open()

			//环境检测

			const agent = navigator.userAgent
			const isAndroid = agent.indexOf('Android') > -1 || agent.indexOf('Adr') > -1 //android终端
			const isIos = !!agent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) //ios终端
			const isIosNative = agent.toLowerCase().indexOf('safari') <= -1

			var prams
			if (isIosNative) {
				prams = 'native'
			} else if (isIos) {
				prams = 'ios'
			} else if (isAndroid) {
				prams = 'Android'
			} else {
				prams = 'other'
			}
			axios({
				method: 'post',
				url: '/user/user/register.do',
				params: {
					userPhone: this.phone,
					userPass: MD5().hex(this.password),
					regCode: this.yzm,
					promoterCode: this.tuiGuangCode,
					source: prams + ',' + storage.getItem('source')
				}
			})
				.then(res => {
					storage.setItem('userPhone', this.phone)
					res = res.data
					if (res.code == 200) {
						MessageBox.alert(res.msg, '用户注册').then(() => {
                            this.$store
                                .dispatch('getLogin', {
                                    userPass: this.password,
                                    userPhone: this.phone
                                })
                                .then(res => {
                                    Toast(res.msg)
                                    this.$router.push({path: '/'})
                                })
						})
					} else {
						MessageBox.alert(res.msg, '用户注册')
					}
				})
				.then(() => {
					Indicator.close()
					this.registerkey = true
				})
		},
		goBack() {
			window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
		}
	}
}
</script>
<style scoped>
body {
	background-color: #fff;
}
</style>
